window.onload = function(){
	pubuliu('main','img-box');
	var dataImg = {'data':[{'src':'p1.fw.png'},{'src':'p2.fw.png'},{'src':'p3.fw.png'}]};//模拟JSON数据
	window.onscroll = function(){//滚动加载
		if(moduan('main','img-box')){
			var opar = document.getElementById('main');//获取外层容器
			for(var i = 0; i < dataImg.data.length; i++){
				var oImgBox = document.createElement('div');
				oImgBox.className = 'img-box';
				opar.appendChild(oImgBox);
				var oPic = document.createElement('div');
				oPic.className = 'pic';
				oImgBox.appendChild(oPic);
				var oImg = document.createElement('img');
				oImg.src = 'img/'+dataImg.data[i].src;
				oPic.appendChild(oImg);
			}
			pubuliu('main','img-box');//重新改变添加的图片DIV的位置
		}

	};
	window.onresize = function () {//改变浏览器宽度
		pubuliu('main','img-box');//重新改变图片DIV的位置
	}
}





function pubuliu(par,box){
	var oPar = document.getElementById(par);//获取最外层DIV
	var cName = getByClass(oPar,box);//获取每个图片的包含层的CLass
	//alert(cName[0]);
	var cols = Math.floor(document.documentElement.clientWidth / cName[0].offsetWidth);//获取浏览器最多可以容纳多少列
	//console.log(cols);
	oPar.style.cssText = 'width:' + cName[0].offsetWidth*cols + 'px;margin:0 auto;';
	var lHeight = [];//存放列高
	for (var i = 0; i < cName.length; i++) {
		if (i<cols) {//判断第一行
			lHeight.push(cName[i].offsetHeight);
		}else{
			//alert(lHeight);
			var mHeight = Math.min.apply(null,lHeight);//获取最小高度值
			var mIndex = getMindex(lHeight,mHeight);//获取最小高度索引
			//console.log(mHeight);
			//console.log(mIndex);
			cName[i].style.cssText = 'position:absolute;left:' + cName[0].offsetWidth*mIndex +'px;top:'+ mHeight +'px';//给容器加样式
			lHeight[mIndex] += cName[i].offsetHeight ;
		};
	}
};
function getByClass(par,box){//获取class容器
	var classArr = [];
	var oDiv = par.getElementsByTagName('*');
	for(var i = 0; i < oDiv.length; i++){
		if (oDiv[i].className == box) {
			classArr.push(oDiv[i]);
		}
	}
	return classArr;
}
function getMindex (arr,minNum) {//获取数组最小值
	for(var i = 0; i < arr.length; i++){
		if(arr[i] == minNum){
			return i;
		}
	}
}

function moduan(par,box){//判断是否需要加载数据
	var oPar = document.getElementById(par);
	var getClass = getByClass(oPar,box);//获取每个图片的包含层的CLass
	var lastTop = getClass[getClass.length-1].offsetTop + Math.floor(getClass[getClass.length-1].offsetHeight/2);
	var scrollNum = document.body.scrollTop || document.documentElement.scrollTop;
	var wHeight = document.body.clientHeight ||document.documentElement.clientHeight;
	return (lastTop < scrollNum + wHeight) ? true : false;
}










